<template>
  <div class="header-panel-container">
    <img class="logo" src="@/assets/logo.png" />
    <span class="title">Ajax Collector</span>
    <div class="tool-container">
      <div :class="{ focus: current === 1 }" @click="handleChange(1)">
        <svg-icon icon-class="listener" class="icon" />
      </div>
      <div :class="{ focus: current === 2 }" @click="handleChange(2)">
        <svg-icon icon-class="setting" class="icon" />
      </div>
      <div @click="handleDownload">
        <svg-icon icon-class="download" class="icon" />
      </div>
      <div @click="handleClean">
        <svg-icon icon-class="clear" class="icon" />
      </div>
      <div @click="handleReload">
        <svg-icon icon-class="reload" class="icon" />
      </div>
    </div>
  </div>
</template>

<script>
import { simpleDownload } from "@alrale/downloads";
import { fmtJSON, windowReload, headersToObject } from "@/common";

export default {
  props: ["current"],
  methods: {
    handleChange(index) {
      this.$emit("update:current", index);
    },
    handleClean() {
      this.$emit("update:current", 1);
      this.$emit("reload");
      this.$store.dispatch("reload");
    },
    handleReload() {
      this.handleClean();
      windowReload();
    },
    handleDownload() {
      const target = this.$store.state.logs || [];
      if (!target || target.length === 0) return;
      const list = target.map((item) => {
        const { content, requestHeaders, responseHeaders, ...targetItem } = item
        const contentJSON = fmtJSON(content);
        const reqHeaders = headersToObject(requestHeaders);
        const resHeaders = headersToObject(responseHeaders);
        return {
          ...targetItem,
          content: contentJSON,
          requestHeaders: reqHeaders,
          responseHeaders: resHeaders,
        };
      });
      simpleDownload(JSON.stringify(list, null, "\t"), `logs.json`);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/index.scss";

.header-panel-container {
  @include set_w_h;
  @include flex_item_center;
  box-shadow: 0 0 8px rgb(0 0 0 / 15%);
  font-size: 14px;
  position: relative;
  .logo {
    @include set_w_h(22px);
    margin-left: 15px;
  }
  .title {
    color: $FontMainColor;
    font-weight: 600;
    margin-left: 8px;
  }
  .tool-container {
    flex: auto 1 1;
    display: flex;
    justify-content: flex-end;
    & > div {
      @include flex_center;
      @include set_w_h(48px);
      border-radius: 3px 3px 0 0;
      &:hover {
        cursor: pointer;
        background-color: #e0f8ed;
      }
      &:active {
        // background-color: hsl(153, 47%, 49%);
        background-color: rgb(66 185 131 / 25%);
        // opacity: 0.5;
      }
      .icon {
        font-size: 18px;
        color: #2c3e50;
        &:active {
          transform: scale(0.8);
        }
      }
    }
    .focus {
      border-bottom: 2px solid $MainColor;
      & > i {
        color: $MainColor;
      }
    }
  }
}
</style>
